<template>
  <div class="manufacturer">
    <div class="search">
<!--      <el-input-->
<!--          placeholder="请输入厂家名称"-->
<!--          class="searchInput"-->
<!--          v-model="searchForm.name"-->
<!--          style="width: 200px"-->
<!--          clearable>-->
<!--      </el-input>-->
<!--      <el-button class="first" type="primary" @click="searchFormBtn" size="mini">查询</el-button>-->
<!--      <el-button type="warning" @click="clearBtn" size="mini">重置</el-button>-->
      <el-button type="success" @click="addManufactuer" size="mini">新增类型</el-button>
    </div>
    <div class="main">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="id"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="类型名称"
            align="center">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        :append-to-body="true"
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入类型名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {ajax} from '@/config/product'
export default {
  name: "category",
  props: {
    msg: ''
  },

  data() {
    const phoneRule = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error('请输入有效的手机号码'));
      } else {
        callback();
      }
    };
    return {
      ruleForm:{
        name: '',
      },
      rules: {
        name: [
          {required: true, name: true, message: '请输入商品名称', trigger: 'blur'},
        ],
        phone: [
          {validator: phoneRule, trigger: 'blur', } // 触发时机是失去焦点时验证
        ]
      },
      dialogTitle:'新增类型',
      dialogVisible:false,
      searchForm: {
        name: '',
      },
      tableData: []
    }
  },
  created() {
        this.getCategoryList()
    },
  methods: {
    //类型列表查询
    getCategoryList(){
      ajax.getCategoryListApi().then(res=>{
        const {data}=res
        this.tableData=data
        console.log(data)
      })
    },
    //类型新增
    addCate(){
      ajax.addCategory(this.ruleForm).then(res=>{
        const {data}=res
        console.log(data)
        if (data.code == '00000'){
          this.$message.success('新增成功')
          this.getCategoryList()
          this.dialogVisible=false
          this.ruleForm.name=null
        }else {
          this.$message.error(data.msg)
        }
      })
    },
    clearBtn() {
      this.searchForm.name = null
    },
    searchFormBtn() {

    },
    addManufactuer(){
      this.dialogTitle='新增类型'
      this.dialogVisible=true
    },
  }

}
</script>

<style scoped lang="scss">
.search {
  display: flex;

  .first {
    margin-left: 20px;
  }
}
.main{
  margin-top: 35px;
}
</style>